<!DOCTYPE html>
<html lang="cn" window-frame="solid-with-shadow" window-icon="../images/icon/icon.ico">
<head>
    <meta charset="UTF-8">
    <title>BS Redis Desktop Client</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        @import "../css/define.css";
        html, body {
            width: 100%;
            height: 100%;
            background: #fff;
            overflow: hidden;
        }

        .form {
            margin: 15px;
            flow: vertical;
            vertical-align: top;
        }

        .form .row {
            width: 100%;
            flow: horizontal;
            padding: 5px 0;
        }

        .form .row .t {
            width: 70px;
            padding: 3px 10px 3px 0;
            text-align: right;
        }

        .form .row .i {
            size: *;
            flow: horizontal;
            vertical-align: middle;
            horizontal-align: left;
        }

        .form .row .i input, .form .row .i select {
            size: *;
            padding: 5px 6px;
        }

        .form .row .i select option {
            padding: 3px 6px;
            cursor: pointer;
        }

        .form .row .i select option:hover {
            background: @background;
            color: #1e1e1e;
        }
    </style>
</head>
<body>
<div styleset="#title-bar" role="window-caption">
    <div class="title-bar-title">
        <img class="app-icon" src="../images/icon/app.png" height="16px"/>
        <span class="app-name"></span>
    </div>
    <div class="title-bar-action">
        <button class="btn exit" id="exit"></button>
    </div>
</div>
<div id="form"></div>
<script type="module">
    import tools from "../js/tools"

    const view = tools.getView()
    const parameters = tools.getParameters()
    document.$(".app-name").innerText = parameters.title
    document.on("click", "#exit", () => {
        view.close("close")
    })

    class Form extends Element {
        constructor() {
            super()
        }

        render() {
            return <div class="form">
                <div class="row">
                    <div class="t">
                        key
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.keyChange(...args)}
                               placeholder={"请输入key"}/>
                    </div>
                </div>
                <div class="row">
                    <div class="t">
                        类型
                    </div>
                    <div class="i">
                        <select class="type"
                                onChange={(...args) => this.typeChange(...args)}
                                placeholder={"请选择类型"}>
                            <option value="string">string</option>
                            <option value="list">list</option>
                            <option value="set">set</option>
                            <option value="zset">zset</option>
                            <option value="hash">hash</option>
                        </select>
                    </div>
                </div>
                {this.renderField()}
                {this.renderMember()}
                <div class="row">
                    <div class="t">
                        值
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.valChange(...args)}
                               placeholder={"请输入值"}/>
                    </div>
                </div>
                {this.renderExpireTime()}
                <div class="row" style="margin-top:10px">
                    <div class="t">

                    </div>
                    <div class="i">
                        <button class="btn btn-primary" onClick={() => this.ok()}>提交</button>
                        <button class="btn btn-primary" onClick={() => this.cancel()} style="margin-left:10px">取消
                        </button>
                    </div>
                </div>
            </div>
        }

        form = {
            key: "",
            type: "",
            value: "",
            field: "",
            expireTime: "",
            timeType: "1"
        }

        renderField() {
            if (this.form.type === "hash") {
                return <div class="row">
                    <div class="t">
                        字段
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.filedChange(...args)}
                               placeholder={"请输入字段"}/>
                    </div>
                </div>
            }
        }
        renderMember(){
            if (this.form.type === "zset") {
                return <div class="row">
                    <div class="t">
                        成员
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.memberChange(...args)}
                               placeholder={"请输入成员"}/>
                    </div>
                </div>
            }
        }
        renderExpireTime() {
            if (this.form.type === "string") {
                return [
                    <div class="row">
                        <div class="t">
                            过期时间
                        </div>
                        <div class="i">
                            <input type="text"
                                   onChange={(...args) => this.expireTimeChange(...args)}
                                   placeholder={"请输入过期时间"}/>
                        </div>
                    </div>,
                    <div class="row">
                        <div class="t">
                            时间类型
                        </div>
                        <div class="i">
                            <select class="type" value="1" onChange={(...args) => this.timeTypeChange(...args)}
                                    placeholder={"请选择时间类型"}>
                                <option value="1">秒</option>
                                <option value="2">毫秒</option>
                            </select>
                        </div>
                    </div>

                ]
            }
            return ""
        }

        filedChange(evt, ele) {
            this.form.field = ele.value
        }
        memberChange(evt,ele) {
            this.form.member = ele.value
        }
        keyChange(evt, ele) {
            this.form.key = ele.value
        }

        typeChange(evt, ele) {
            let [x, y] = tools.windowPosition()
            let scale = devicePixelRatio
            this.form.type = ele.value
            switch (this.form.type) {
                case "string":
                    tools.getView().move(x, y, 320 * scale, 300 * scale)
                    break
                case "hash":
                    tools.getView().move(x, y, 320 * scale, 260 * scale)
                    break
                case "zset":
                    tools.getView().move(x, y, 320 * scale, 260 * scale)
                    break
                default:
                    tools.getView().move(x, y, 320 * scale, 230 * scale)
            }
            this.componentUpdate()
        }

        valChange(evt, ele) {
            this.form.value = ele.value
        }

        expireTimeChange(evt, ele) {
            this.form.expireTime = ele.value
        }

        timeTypeChange(evt, ele) {
            this.form.timeType = ele.value
        }

        ok() {
            if (!this.form.key) {
                tools.alert("请输入key")
                return
            }
            if (!this.form.type) {
                tools.alert("请选择类型")
                return
            }
            if (!this.form.value) {
                tools.alert("请输入值")
                return
            }
            if (this.form.type === "hash" && !this.form.field) {
                tools.alert("请输入字段")
                return
            }
            if (this.form.type === "zset" && !this.form.member) {
                tools.alert("请输入成员")
                return
            }
            const save = () => {
                switch (this.form.type) {
                    case "list":
                        return this.addListKey()
                    case "set":
                        return this.addSetKey()
                    case "hash":
                        return this.addHashKey()
                    case "zset":
                        return this.addZsetKey()
                    default:
                        return this.addStringKey()
                }

            }
            // 校验key是否存在
            if (parameters.view.xcall("is_key_exist", this.form.key)) {
                tools.confirm("键已存在是否继续？确定将覆盖已有数据。")
                    .then(res => {
                        if (res === true) {
                            parameters.view.xcall("delete_key", this.form.key)
                            save()
                        }
                    })
                return
            }
            save()

        }

        addStringKey() {
            // 提取参数
            let params = [this.form.key, this.form.value, this.form.expireTime, this.form.timeType]
            if (parameters.view.xcall("add_string_key", ...params) === true) {
                tools.alert("添加成功")
                    .then(() => {
                        view.close(true)
                    })
            } else {
                tools.alert("添加失败")
            }
        }

        addListKey() {
            if (parameters.view.xcall("add_list_key", this.form.key, this.form.value) === true) {
                tools.alert("添加成功")
                    .then(() => {
                        view.close(true)
                    })
            } else {
                tools.alert("添加失败")
            }
        }

        addSetKey() {
            if (parameters.view.xcall("append_set_val", this.form.key, this.form.value) === true) {
                tools.alert("添加成功")
                    .then(() => {
                        view.close(true)
                    })
            } else {
                tools.alert("添加失败")
            }
        }

        addHashKey() {
            if (parameters.view.xcall("append_hash_data", this.form.key, this.form.field, this.form.value) === true) {
                tools.alert("添加成功")
                    .then(() => {
                        view.close(true)
                    })
            } else {
                tools.alert("添加失败")
            }
        }
        addZsetKey(){
            parameters.view.xcall("async_append_z_set_data", this.form.key, this.form.member, this.form.value,res => {
                if (res.code === 200) {
                    tools.alert("添加成功")
                        .then(() => {
                            view.close(true)
                        })
                } else {
                    tools.alert("添加失败")
                }
            })
        }
        cancel() {
            view.close("close")
        }
    }

    document.$("#form").patch(<Form/>)
</script>
</body>
</html>